<template>
  <div class="student-wrap">
    <form action="##">
      <div class="username-wrap">
        姓名：
        <input
          type="text"
          v-model="username.content"
          @blur="validatorUsername()"
          @focus="username.isShow = false"
        />
        <span v-show="username.isShow">
          {{ username.msg }}
        </span>
      </div>
      <div class="age-wrap">
        年龄：
        <input
          type="text"
          v-model="age.content"
          @blur="validatorAge()"
          @focus="age.isShow = false"
        />
        <span v-show="age.isShow">
          {{ age.msg }}
        </span>
      </div>
      <div class="gender-wrap">
        性别：
        <select v-model="gender">
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div class="phone">
        手机号：
        <input
          type="text"
          v-model="phone.content"
          @blur="validatorPhone()"
          @focus="phone.isShow = false"
        />
        <span v-show="phone.isShow">
          {{ phone.msg }}
        </span>
      </div>
      <div class="submit-wrap">
        <input type="button" value="创建新用户" @click="createStudent()" />
      </div>
    </form>
    <ul class="student-news">
      <li class="news-top">
        <div class="name">姓名</div>
        <div class="gender">性别</div>
        <div class="age">年龄</div>
        <div class="phone">手机</div>
        <div class="move">删除</div>
      </li>
      <li v-for="(item, index) in student" :key="index">
        <div class="name">
          {{ item.username }}
        </div>
        <div class="gender">{{ item.gender }}</div>

        <div class="age">{{ item.age }}</div>
        <div class="phone">
          {{ item.phone }}
        </div>
        <div class="move" @click="remove(index)">删除</div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      student: [],
      username: {
        content: '',
        isShow: false,
        msg: '4-16位(字母，数字，下划线)'
      },
      age: { content: '', msg: '请输入正确的年龄', isShow: false },
      phone: {
        content: '',
        msg: '请输入正确的手机号(1开头，11位)',
        isShow: false
      },
      gender: '男'
    }
  },
  methods: {
    createStudent() {
      if (
        this.username.content &&
        this.age.content &&
        this.phone.content &&
        this.username.isShow === false &&
        this.age.isShow === false &&
        this.phone.isShow === false
      ) {
        console.log(1111)
        let obj = {
          username: this.username.content,
          age: this.age.content,
          gender: this.gender,
          phone: this.phone.content
        }
        this.student.push(obj)
        this.username.content = ''
        this.age.content = ''
        this.phone.content = ''
        this.gender = '男'
      }
    },
    validatorUsername() {
      let reg = /^\w{4,16}$/
      if (!reg.test(this.username.content)) {
        this.username.isShow = true
      }
    },
    validatorAge() {
      let reg = /^\d{1,2}$/
      if (!reg.test(this.age.content)) {
        this.age.isShow = true
      }
    },
    validatorPhone() {
      let reg = /^1\d{10}$/
      if (!reg.test(this.phone.content)) {
        this.phone.isShow = true
      }
    },
    remove(index) {
      this.student.splice(index, 1)
    }
  }
}
</script>

<style lang="less" scoped>
form {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.student-news {
  li {
    display: flex;
    align-items: center;
    justify-content: space-around;
    & > div {
      flex: 1;
    }
    .phone {
      flex: 2;
    }
  }
}
</style>
